<template>
  <div class="homepage">

    <!-- 热门课程 -->
    <div class="carousel-container">
      <el-carousel height="300px" :autoplay="true" indicator-position="outside">
        <el-carousel-item v-for="course in popularCourses" :key="course.id">
          <div class="carousel-item">
            <img :src="course.image" alt="course image" class="carousel-image" />
            <div class="carousel-text">
              <h2>{{ course.title }}</h2>
              <p>{{ course.description }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 统计信息 -->
    <div class="statistics-container">
      <el-row :gutter="16">
        <el-col :span="8">
          <div class="statistic-card">
            <el-statistic :value="courseCount">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  课程数
                  <el-tooltip effect="dark" content="总课程数量" placement="top">
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>比昨天增加</span>
                <span class="green">2%</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="statistic-card">
            <el-statistic :value="userCount">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  用户数
                  <el-tooltip effect="dark" content="总用户数量" placement="top">
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>月增长</span>
                <span class="red">5%</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="statistic-card">
            <el-statistic :value="teacherCount" title="老师数">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  老师数
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>比上周增加</span>
                <span class="green">10%</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 名师推荐 -->
    <div class="recommended-teachers-container">
      <el-typography>
        <el-title level="3" class="teacher-title">名师推荐</el-title>
      </el-typography>
      <el-row :gutter="20">
        <el-col
            v-for="teacher in recommendedTeachers"
            :key="teacher.id"
            :span="8"
        >
          <el-card class="teacher-card">
            <img :src="teacher.image" alt="teacher image" class="teacher-image" />
            <div class="teacher-info">
              <h3>{{ teacher.name }}</h3>
              <p>{{ teacher.specialty }}</p>
              <el-rate v-model="teacher.rating" disabled />
            </div>
            <el-button type="primary" size="small" @click.stop="viewDetails(teacher.id)">查看详情</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 课程分类展示 -->
    <div class="category-container">
      <el-row :gutter="20">
        <el-col
            v-for="category in categories"
            :key="category.categoryId"
            :span="24"
            class="category-section"
        >
          <el-typography>
            <el-title level="2" class="category-title" >{{ category.categoryName }}</el-title>
          </el-typography>
          <el-row :gutter="20" class="courses-row">
            <el-col
                v-for="course in category.courses"
                :key="course.courseId"
                :xs="24"
                :sm="12"
                :md="8"
                :lg="6"
            >
              <el-card shadow="always" class="course-card">
                <img :src="course.image" alt="course image" class="course-image" />
                <div class="course-info">
                  <h3>{{ course.title }}</h3>
                  <p>{{ course.description }}</p>
                </div>
                <div class="button-group">
                  <el-button type="success" size="mini" @click.stop="joinCourse(course.courseId)">加入课程</el-button>
                  <el-button type="primary" size="mini" @click.stop="startLearning(course.courseId)">立即学习</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getAllCourses } from '@/apis/course.js';
import { getHotCourses } from '@/apis/hotCourse.js';
import { addStudentCourse } from "@/apis/studentCourses.js";
import {  Warning } from '@element-plus/icons-vue';

// 初始化路由
const router = useRouter();

// 热门课程列表
const popularCourses = ref([]);

// 获取热门课程
const getHotCoursesAsync = async () => {
  const res = await getHotCourses();
  popularCourses.value = res.data;
};

// 所有分类及其课程
const categories = ref([]);

// 获取所有分类及其课程
const getAllCoursesAsync = async () => {
  const res = await getAllCourses();
  categories.value = res.data.map(category => ({
    categoryId: category.categoryId,
    categoryName: category.categoryName,
    courses: category.coursesList // 直接使用 coursesList
  }));
};

// 假数据
const courseCount = ref(100); // 假设课程数为 100
const userCount = ref(500); // 假设用户数为 500
const teacherCount = ref(50); // 假设老师数为 50

// 页面加载时执行的操作
onMounted(() => {
  getAllCoursesAsync();
  getHotCoursesAsync();
});

// 加入课程操作
const joinCourse = async (courseId) => {
  const res = await addStudentCourse(courseId);
};

// 立即学习操作
const startLearning = (courseId) => {
  router.push(`/course/${courseId}`);
};


// 名师推荐假数据
const recommendedTeachers = ref([
  {
    id: 1,
    name: "张老师",
    specialty: "数学",
    image: "https://img1.baidu.com/it/u=1223818831,3405644425&fm=253&fmt=auto&app=138&f=PNG?w=300&h=300",
    rating: 4.5
  },
  {
    id: 2,
    name: "李老师",
    specialty: "物理",
    image: "https://img1.baidu.com/it/u=1223818831,3405644425&fm=253&fmt=auto&app=138&f=PNG?w=300&h=300",
    rating: 4.0
  },
  {
    id: 3,
    name: "王老师",
    specialty: "化学",
    image: "https://img1.baidu.com/it/u=1223818831,3405644425&fm=253&fmt=auto&app=138&f=PNG?w=300&h=300",
    rating: 5.0
  }
]);

// 查看老师详情操作
const viewDetails = (teacherId) => {
  // 根据 teacherId 进行跳转或其他操作
  console.log(`查看老师 ${teacherId} 的详情`);
};

</script>

<style scoped>
.homepage {
  padding: 30px;
  background-color: #f8f8f8;
}

.carousel-container {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 30px;
}

.carousel-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.carousel-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 10px;
}

.statistics-container {
  padding-left: 150px; /* 左侧间距 */
  padding-right: 150px; /* 右侧间距 */
  margin: 10px 0; /* 为统计信息增加上下间距 */
  text-align: center; /* 中心对齐统计信息 */
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}

.red {
  color: var(--el-color-error);
}

.category-container {
  margin-top: 30px;
  padding-left: 150px; /* 左侧间距 */
  padding-right: 150px; /* 右侧间距 */
}
.teacher-title {
  font-weight: bold; /* 使标题加粗 */
  font-size: 1.5em; /* 调整字体大小 */
}

.category-section {
  margin-bottom: 40px;
}

.category-title {
  margin-bottom: 40px; /* 增加分类名称与课程之间的间距 */
  font-weight: bold; /* 使标题加粗 */
  font-size: 1.5em; /* 调整字体大小 */
}

.courses-row {
  margin-top: 20px; /* 增加分类名称与课程之间的间距 */
}

.course-card {

  border-radius: 10px;
  transition: transform 0.2s;
}

.course-card:hover {
  transform: scale(1.05);
}

.course-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.course-info {
  margin: 10px 0;
}

.button-group {
  display: flex;
  justify-content: space-between;
}

.el-row {
  margin-left: -20px; /* 负边距，抵消容器的左右间距 */
  margin-right: -20px;
}

.recommended-teachers-container {
  margin-top: 30px;
  padding-left: 150px; /* 左侧间距 */
  padding-right: 150px; /* 右侧间距 */
}

.teacher-card {
  border-radius: 10px;
  text-align: center;
  padding: 20px;
}

.teacher-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
}

.teacher-info {
  margin: 10px 0;
}

</style>
